<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/10/21
  Time: 8:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>、
<html>
  <head>
    <title>管理系统</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.js"></script>
  </head>
  <body>
  <!-- 导航栏 -->
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">学生管理系统</a>
          </div>
          <div>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">管理员管理</a></li>
              <li><a href="#">老师管理</a></li>
              <li><a href="#">学生管理</a></li>
            </ul>
          </div>
        </div>
      </nav>

    </div>
    <div class="col-md-2"></div>
  </div>
  <!-- 表格 -->
  <div class="row">
    <div class="col-md-2"></div>


    <div class="col-md-8">
      <div class="row" style="margin-bottom:18px">
        <div class="col-md-6">
        <div class="input-group">
          <input type="text" id="search" class="form-control" placeholder="输入用户名称">
          <span class="input-group-addon" onclick="getUsers(1)">搜索</span>
        </div>
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-2">
          <button id="btnAddUser" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                  type="button"> 添加
          </button>
        </div>
      </div>

      <table class="table table-striped table-bordered table-hover">
<%--        <caption>基本的表格布局</caption>--%> <!-- 注释快捷键 CTRL+Shift + ?/ -->
        <thead>
        <tr>
          <!-- 拷贝一行快捷键 ctl+D -->
          <th>序号</th>
          <th>账号</th>
          <th>密码</th>
          <th>电话号码</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id = 'bg'>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>Bangalore</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-warning">删除</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>Mumbai</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-warning">删除</button>
          </td>
        </tr>
        </tbody>
      </table>

    </div>
    <div class="col-md-2"></div>
  </div>

  <!-- 按钮触发模态框 -->
<%--  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>--%>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">添加管理员</h4>
        </div>
        <div class="modal-body">
          <form role="form" >
            <div class="form-group">
              <label for="username">账号</label>
              <input type="text" class="form-control" id="username" placeholder="请输入账号">
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="text" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
              <label for="phone">电话号码</label>
              <input type="text" class="form-control" id="phone" placeholder="请输入电话号码">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="addUser()">添加</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>


  <!-- 按钮触发模态框 -->
<%--  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalEdit">开始演示模态框</button>--%>
  <!-- 模态框（Modal） -->
  <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabelEdit">编辑管理员</h4>
        </div>
        <div class="modal-body">
          <form role="form" >
            <div class="form-group">
              <label for="usernameEdit">账号</label>
              <input type="text" class="form-control" id="usernameEdit" placeholder="请输入账号">
            </div>
            <div class="form-group">
              <label for="passwordEdit">密码</label>
              <input type="text" class="form-control" id="passwordEdit" placeholder="请输入密码">
            </div>
            <div class="form-group">
              <label for="phoneEdit">电话号码</label>
              <input type="text" class="form-control" id="phoneEdit" placeholder="请输入电话号码">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" onclick="editUser()">确认</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>
  </body>
  <script>
    var pageIndex = 1;
    var pageSize = 10;
    getUsers(1);
    //获取用户信息
    function getUsers(pageIndex) {
      var username = $("#search").val();
      if (!username) {
        username = "";
      }
      $.ajax({
        url: "user", //路径
        data: {
          method: "getUsers", //方法
          username: username, //参数设置
          pageIndex: pageIndex,
          pageSize: pageSize
        },
        success: function (data) {
          data = JSON.parse(data);
          html = "";
          //循环遍历列表赋值
          for (var i=0; i<data.length; i++) {
            html += '<tr>' +
                    '<td>' + data[i].id + '</td>' +
                    '<td>' + data[i].username + '</td>' +
                    '<td>' + data[i].password + '</td>' +
                    '<td>' + data[i].phone + '</td>' +
                    '<td>' +
                    '<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit"  ' +
                    'onclick="initUser(' + data[i].id +')">编辑</button>' +
                    '<button type="button" class="btn btn-warning" onclick="deleteUser(' + data[i].id +')">删除</button>' +
                    '</td>' +
                    '</tr>'
          }
          $("#bg").html(html);
        }, error: function (data) {
          alert("出错")
        }
      })
    }

    //添加用户信息
    function addUser() {
      var username = $("#username").val();
      var password = $("#password").val();
      var phone = $("#phone").val();
      //请求参数组装
      var obj = {
        username : username,
        password: password,
        phone: phone,
        method: "addUser"
      }
      $.ajax({
        url: "/user",
        data: obj,
        success: function (data) {
          alert("添加成功!");
          $("#myModal").modal('hide');
          getUsers(1);
        }, error: function (data) {
          alert("添加失败")
        }
      })
    }
    //用户id
    var initID = 0;
    //初始化编辑
    function initUser(id) {
      var obj = {
        id: id,
        method: "getOne"
      }
      $.ajax({
        url: "/user",
        data: obj,
        success: function (data) {
          data = JSON.parse(data);
          $("#usernameEdit").val(data.username);
          $("#passwordEdit").val(data.password);
          $("#phoneEdit").val(data.phone);
          initID = data.id;
        }
      })
    }
    //编辑
    function editUser() {
      var username = $("#usernameEdit").val();
      var password = $("#passwordEdit").val();
      var phone = $("#phoneEdit").val();
      //请求参数的组装
      var obj = {
        id: initID,
        username: username,
        password: password,
        phone: phone,
        method: "editUser"
      }
      $.ajax({
        url: "/user",
        data: obj,
        success: function (data) {
          alert("编辑成功!");
          $("#myModalEdit").modal('hide');
          getUsers(1);
        }, error: function (data) {
          alert("编辑失败");
        }
      })
    }
    //删除
    function deleteUser(id) {
      if (!confirm("确认删除该记录吗？")) {
        return;
      }
      var obj = {
        id: id,
        method: "deleteUser"
      }
      $.ajax({
        url: "/user",
        data: obj,
        success: function (data) {
          alert("删除成功!");
          getUsers(1);
        }
      })
    }

  </script>
</html>
